<template>
  <div class="list">
    <el-row type="flex" justify="end">
      <el-button type="primary" @click="$router.push('/questions/new')">新增试题</el-button>
    </el-row>
    <search :simplelist="SimpleInfoList" @upLoadForSearch="upLoadForSearch" @upload="initData" />
    <el-alert :title="`数据一共${counts}条`" type="info" show-icon />
    <br>
    <!-- 表格 -->
    <el-table
      :data="list"
      style="width: 100%"
    >
      <el-table-column
        prop="number"
        label="试题编号"
        width="180"
      />
      <el-table-column
        prop="subject"
        label="学科"
        width="180"
      />
      <el-table-column
        prop="catalog"
        label="目录"
      />
      <el-table-column
        prop="questionType"
        label="题型"
        :formatter="questionType"
      />
      <el-table-column
        prop="question"
        label="题干"
      >
        <template slot-scope="{row}">
          <span v-html="row.question" />
        </template>
      </el-table-column>
      <el-table-column
        prop="addDate"
        label="录入时间"
      >
        <template slot-scope="{row}">
          {{ row.addDate | dataFilter }}
        </template>
      </el-table-column>
      <el-table-column
        prop="difficulty"
        label="难度"
        :formatter="formatterFn"
      />
      <el-table-column
        prop="creator"
        label="录入人"
      />
      <el-table-column
        prop="operation"
        label="操作"
      >
        <template slot-scope="{row}">
          <el-button type="preview" icon="el-icon-view" style="background: #ecf5ff;color:#6bb6ff" circle @click="preview(row.id)" />
          <el-button type="redact" icon="el-icon-edit" style="background: #f0f9eb;color:#9dcf86" circle @click="editHandle(row.id)" />
          <el-button type="delete" icon="el-icon-delete" style="background: #fef0f0;color:#f68880" circle @click="delHandle(row.id)" />
          <el-button type="submit" icon="el-icon-check" style="background: #fdf6ec;color:#eaa76f" circle @click="join(row)" />
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :current-page.sync="query.page"
      layout="total, prev, pager, next, jumper"
      :total="counts"
      :page-size="query.pagesize"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <preview ref="prev" :simple-info-list="SimpleInfoList" />
  </div>
</template>

<script>
import { getQuestions, delQuestions, joinQuestions, getQuestionsDetails, getSimpleInfo } from '@/api/questions/list'
import preview from '@/views/questions/list/components/preview.vue'
import search from '@/views/questions/list/components/search.vue'
export default {
  name: 'List',
  components: { preview, search },
  props: {
    totals: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      currentPage4: 1,
      from: '',
      list: [],
      query: {
        page: 1,
        pagesize: 5
      },
      counts: 0,
      SimpleInfoList: []
      // eslint-disable-next-line vue/no-dupe-keys
    }
  },
  created() {
    this.initData()
    this.getSimpleInfoList()
  },
  methods: {
    async initData() {
      const { counts, items } = await getQuestions(this.query)
      this.counts = counts
      this.list = items
      console.log(items)
    },
    handleSizeChange(val) {
      this.query.pagesize = val
      this.initData()
    },
    handleCurrentChange(val) {
      this.query.page = val
      this.initData()
    },
    // 删除
    async delHandle(id) {
      await this.$confirm('确定删除吗')
      await delQuestions(id)
      this.$message.success('删除成功')
      this.initData()
    },
    // 添加到精选
    async join(data) {
      console.log(data)
      await this.$confirm('添加到精选题录, 是否继续?')
      await joinQuestions({ ...data, choiceState: 1 })
      this.$message.success('添加成功')
      this.initData()
    },
    // 修改
    editHandle(id) {
      this.$router.push('/questions/new?id=' + id)
      console.log(id)
    },
    // 显示预览
    async preview(id) {
      console.log(id)
      this.$refs.prev.p_isShow = true
      const res = await getQuestionsDetails(id)
      this.$refs.prev.titleInfo = res
    },
    // 条件搜索
    async upLoadForSearch(e) {
      const res = await getQuestions({ ...e, ...this.queryData })
      const { items, counts } = res
      this.list = items
      this.counts = counts
    },
    // 学科列表
    async getSimpleInfoList() {
      const res = await getSimpleInfo()
      console.log(res)
      this.SimpleInfoList = res
    },
    formatterFn(row, column, cellValue, index) {
      // console.log(row)
      // console.log(column)
      // console.log(index)
      // console.log(cellValue)
      if (cellValue === '1') {
        return '简单'
      } else if (cellValue === '2') {
        return '一般'
      } else {
        return '困难'
      }
    },
    questionType(row, column, cellValue, index) {
      // console.log(row)
      // console.log(column)
      // console.log(index)
      // console.log(cellValue)
      if (cellValue === '1') {
        return '单选题'
      } else if (cellValue === '2') {
        return '多选题'
      } else {
        return '简答题'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.list {
  background: #fff;
  padding: 24px;

}
</style>>
